<template>
	<view class="container">
		<scroll-view class="coupon-list" scroll-y="true" :scroll-top="scrollTop">

			<view class="item" v-for="(item,index) in couponList" :key="index" @tap="getCoupon" :data-index="item.id">
				<view class="tag">{{item.tag}}</view>
				<view class="content">
					<view class="left">
						<view class="discount">{{item.discount}}元</view>
						<view class="min"> 满{{item.min}}元使用</view>
					</view>
					<view class="right">
						<view class="name">{{item.name}}</view>
						<view class="desc">{{item.desc}}</view>
						<view class="time" v-if="item.days != 0">有效期：{{item.days}}天</view>
						<view class="time" v-else> 有效期：{{item.startTime}} - {{item.endTime}}</view>
					</view>
					<view class="couponbg"></view>
				</view>
			</view>

			<view class="page" v-if="showPage">
				<view class="prev " :class="page <= 1 ? 'disabled' : ''" @tap="prevPage">上一页</view>
				<view class="next" :class=" (count / size) < page ? 'disabled' : ''" @tap="nextPage">下一页</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				couponList: [],
				page: 1,
				size: 10,
				count: 0,
				scrollTop: 0,
				showPage: false
			}
		},
		onLoad: function(options) {
			this.getCouponList();
		},
		methods: {
			getCouponList: function() {
				let that = this;
				that.scrollTop = 0;
				that.showPage = false;
				that.couponList = [];
				// 页面渲染完成
				uni.showToast({
					title: '加载中...',
					icon: 'loading',
					duration: 2000
				});

				that.$util.request(that.$api.api.CouponList, {
					page: that.page,
					size: that.size
				}).then(function(res) {
					if (res.errno === 0) {

						that.scrollTop = 0;
						that.couponList = res.data.data;
						that.showPage = true;
						that.count = res.data.count;
					}
					uni.hideToast();
				});

			},
			getCoupon(e) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "/pages/auth/login/login"
					});
				}

				let couponId = e.currentTarget.dataset.index
				that.$util.request(that.$api.api.CouponReceive, {
					couponId: couponId
				}, 'POST').then(res => {
					if (res.errno === 0) {
						uni.showToast({
							title: "领取成功"
						})
					} else {
						that.$util.showErrorToast(res.errmsg);
					}
				})
			},
			nextPage: function(event) {
				var that = this;
				if (this.page > that.count / that.size) {
					return true;
				}
				that.page = that.page + 1;
				this.getCouponList();

			},
			prevPage: function(event) {
				if (this.page <= 1) {
					return false;
				}
				var that = this;
				that.page = that.page - 1;
				this.getCouponList();
			}
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
		min-height: 100%;
	}

	.container {
		background: #f4f4f4;
		min-height: 100%;
		padding-top: 30rpx;
	}

	.coupon-list {
		width: 680rpx;
		height: auto;
		overflow: hidden;
	}

	.item {
		position: relative;
		height: 250rpx;
		width: 600rpx;
		background: linear-gradient(to right, #d8050f, #e68d08);
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 30rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.item:before,
	.item:after {
		content: '.';
		width: 0;
		height: 200%;
		position: absolute;
		top: 20rpx;
	}

	.item:before {
		border-right: 20rpx dotted #eeeeee;
		left: -10rpx;
		width: 1rpx;
	}

	.item:after {
		border-left: 20rpx dotted #eeeeee;
		right: -10rpx;
	}


	.tag {
		margin-left: 40rpx;
		height: 32rpx;
		background: #b8bb12;
		padding-left: 16rpx;
		padding-right: 16rpx;
		position: absolute;
		left: 20rpx;
		color: #fff;
		top: 20rpx;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.content {
		margin-left: 30rpx;
		display: flex;
		margin-right: 40rpx;
		flex-direction: row;
	}

	.content .left {
		padding-top: 50rpx;
		flex: 1;
		border-right: 2rpx dashed rgba(230, 230, 230, .5);
	}

	.discount {
		font-size: 50rpx;
		color: #e9f814;
	}

	.min {
		color: #fff;
	}

	.content .right {
		padding: 11px 14px;
		width: 440rpx;
	}

	.name {
		font-size: 44rpx;
		color: #fff;
		margin-bottom: 14rpx;
	}

	.desc {
		font-size: 24rpx;
		color: #fff;
	}

	.time {
		font-size: 24rpx;
		color: #fff;
		line-height: 30rpx;
	}

	.couponbg {
		position: absolute;
		left: 20%;
		top: 95rpx;
		height: 290rpx;
		width: 730rpx;
		background-color: rgba(255, 255, 255, .15);
		transform: rotate(-20deg);
	}

	.condition {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 78rpx;
		background: rgba(0, 0, 0, 0.08);
		padding: 24rpx 40rpx;
		display: flex;
		flex-direction: row;
	}

	.condition .txt {
		display: block;
		height: 30rpx;
		flex: 1;
		overflow: hidden;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #fff;
	}

	.condition .icon {
		margin-left: 30rpx;
		width: 24rpx;
		height: 24rpx;
	}


	.page {
		width: 750rpx;
		height: 108rpx;
		background: #fff;
		margin-bottom: 10rpx;
	}

	.page view {
		height: 108rpx;
		width: 50%;
		float: left;
		font-size: 29rpx;
		color: #333;
		text-align: center;
		line-height: 108rpx;
	}

	.page .prev {
		border-right: 1px solid #d9d9d9;
	}

	.page .disabled {
		color: #ccc;
	}
</style>
